<template>
  <div class="lix-home">
    <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular"
      @change="swiperChange" @animationfinish="animationfinish">
      <div v-for="(item, index) in broadcast" :key="index">
        <swiper-item @click="handleSwiper" :data-index="index" :data-link="item.link">
          <image :src="item.thumb" class="lix-home__header--slide-image" />
        </swiper-item>
      </div>
    </swiper>
    <div class="lix-home__header--item-container">
      <div class="lix-home__header--item" v-for="(item, idx) in categories" :key="idx" :data-link="item.link" @click="handleNavi">
        <image :src="item.thumb" />
        <p>{{ item.title }}</p>
      </div>
    </div>
    <div class="seperate-line"></div>
    <div class="lix-home__tips vertical-center" v-if="notice">
      <image :src="notice.icon" />
      <div class="lix-home__tips--line"></div>
      <p>{{ notice.text }}</p>
    </div>
    <div class="lix-home__show" v-if="sugergoods.length === 3">
      <div class="lix-home__show--left" @click="go2DetailPage" :data-id="sugergoods[0].link.id">
        <img :src="sugergoods[0].thumb" alt="">
      </div>
      <div class="lix-home__show--right-top" @click="go2DetailPage" :data-id="sugergoods[1].link.id">
        <img :src="sugergoods[1].thumb" alt="">
      </div>
      <div class="lix-home__show--right-bottom" @click="go2DetailPage" :data-id="sugergoods[2].link.id">
        <img :src="sugergoods[2].thumb" alt="">
      </div>
    </div>
    <div class="lix-home__t-container" v-for="(obj, index) in boothstand" :key="index">
      <div class="title">{{ obj.title }}</div>
      <div class="t__ad" @click="go2DetailPage" :data-id="obj.advert.link.id">
        <image :src="obj.advert.thumb" alt="" />
      </div>
      <div class="lix-home__t-list" v-if="obj.format === 'ualf'">
        <!-- row -->
        <div class="lix-home__t-list--item" v-for="(item, idx) in obj.products" :key="idx" @click="go2DetailPage" :data-id="item.id">
          <image :src="item.thumb" />
          <p>{{ item.name }}</p>
          <p class="lix-home__t-list--item-desc">{{ item.description }}</p>
          <p class="lix-home__t-list--item-price"><span>￥</span>{{ item.price }}起</p>
        </div>
      </div>
      <div class="lix-home__b-list" v-else>
        <div class="lix-home__b-list--item" v-for="(item, idx) in obj.products" :key="idx">
          <div v-bind:class="[idx % 2 === 0 ? 'lix-home__b-list.is-right' : '']">
            <image :src="item.thumb"/>
            <div class="lix-home__b-list--info">
              <p class="lix-home__b-list--title">{{ item.title }}</p>
              <p class="lix-home__t-list--item-desc">{{ item.description }}</p>
              <p class="lix-home__t-list--item-price"><span>￥</span>{{ item.price }}起</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="seperate-block"></div>
  </div>
</template>

<script>
import {homeApi} from '../api';
export default {
  data() {
    return {
      broadcast: [],
      categories: [],
      notice: false,
      sugergoods: [],
      boothstand: [],
      imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 1000,
      circular: true,
      firstList: [
        {
          src: '../../static/images/goods/02.png',
          title: '红米6A',
          desc: '好用好看不贵，100超广角，视野可安全覆盖多个车道',
          'price': 599
        },
        {
          src: '../../static/images/goods/03.png',
          title: '红米6A',
          desc: '好用好看不贵',
          'price': 599
        },
        {
          src: '../../static/images/goods/04.png',
          title: '红米6A',
          desc: '好用好看不贵',
          'price': 599
        },
        {
          src: '../../static/images/goods/05.png',
          title: '红米6A',
          desc: '好用好看不贵',
          'price': 599
        },
        {
          src: '../../static/images/goods/06.png',
          title: '红米6A',
          desc: '好用好看不贵',
          'price': 599
        },
        {
          src: '../../static/images/goods/04.png',
          title: '红米6A',
          desc: '好用好看不贵',
          'price': 599
        }
      ]
    };
  },
  onLoad() {
    this.getHomeData();
  },
  methods: {
    getHomeData() {
      homeApi()
        .then(res => {
          console.log(res);
          let data = res.data;
          this.broadcast = data.broadcast;
          this.categories = data.navigation;
          this.notice = data.notice;
          this.sugergoods = data.socrates;
          this.boothstand = data.boothstand;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSwiper(e) {
      // const index = e.mp.currentTarget.dataset.index;
      const link = e.mp.currentTarget.dataset.link;
      // console.log(`第${index}张轮播图被点击`);
      this.go2ProductPage(link.id);
    },
    handleNavi(e) {
      const link = e.mp.currentTarget.dataset.link;
      // this.go2ProductPage(link.id);
      wx.navigateTo({
        url: '/pages/shoplist?id=' + link.id
      });
    },
    go2DetailPage(e) {
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/product?id=' + id
      });
    },
    go2ProductPage(id) {
      wx.navigateTo({
        url: '/pages/product?id=' + id
      });
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/home.scss";
</style>
